@import './theme.less';

@gutter: {
  xs: @padding-xs;
  sm: @padding-sm;
  md: @padding-md;
  lg: @padding-lg;
};

each(@gutter, {
  .pd-@{key}, .ptb-@{key}, .pt-@{key} { padding-top: @value; }
  .pd-@{key}, .ptb-@{key}, .pb-@{key} { padding-bottom: @value; }
  .pd-@{key}, .plr-@{key}, .pl-@{key} { padding-left: @value; }
  .pd-@{key}, .plr-@{key}, .pr-@{key} { padding-right: @value; }
  .mg-@{key}, .mtb-@{key}, .mt-@{key} { margin-top: @value; }
  .mg-@{key}, .mtb-@{key}, .mb-@{key} { margin-bottom: @value; }
  .mg-@{key}, .mlr-@{key}, .ml-@{key} { margin-left: @value; }
  .mg-@{key}, .mlr-@{key}, .mr-@{key} { margin-right: @value; }
})

@fontsize: {
  12: 12px;
  14: 14px;
  16: 16px;
  18: 18px;
  20: 20px;
};

each(@fontsize, {
  .size-@{key} {
    font-size: @value;
  }
})

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.overflow {
  overflow: hidden;
}

.vh-100 {
  height: 100vh;
}

img {
  max-width: 100%;
}